<template>
	<i-page @click="navTo('/pages/views/give_record', 'navigateTo')" color="#fff" navBgColor="rgba(0,0,0,0)"
		:wxTop="true" title="赠送会员" r_title="赠送记录"
		bgColor="linear-gradient(180deg, #FB652E, rgba(251, 101, 46, 0.05) 35%, rgba(243, 244, 245, 1) 50%, rgba(243, 244, 245, 1) 100%)">
		<view class="search">
			<i-search v-model="mobile" placeholder="请输入受赠人手机号" height="" bgColor="#fff"></i-search>
			<text class="button" @click="share">搜索</text>
		</view>
		<i-card top="20rpx" v-if="mobile && userDeatail.mobile">
			<i-orderItem :border="false" title="用户昵称">
				<view class="orderContent" style="width: 75%;">
					{{userDeatail.nickName}}
				</view>
			</i-orderItem>
			<i-orderItem :border="false" title="会员等级">
				<view class="orderContent" style="width: 75%;">
					{{userDeatail.vip}}
				</view>
			</i-orderItem>
			<i-orderItem :border="false" title="温馨提示">
				<view class="orderContent" style="width: 75%;">
					请仔细确认用户信息后再进行会员赠送
				</view>
			</i-orderItem>
		</i-card>
		<i-card top="20rpx" bottom="40rpx">
			<view class="title">请选择需赠送的会员等级</view>
			<view class="tag_card" v-for="(item, index) in vipList" :key="item.id" :class="{active: active === index}"
				@click="check(index)">
				<view class="card_left">
					<text>{{item.proportionName}}</text>
					<text class="text">赠{{item.targetAmount}}优惠金</text>
				</view>
				<i-price :size="28">{{item.rechargeValue}}</i-price>
			</view>
			<view v-if="skeleton" v-for="item in 3" :key="item" style="margin-top: 20rpx;">
				<i-skeleton size="0px" border="1rpx solid #f3f4f5" :icon="false" :rowsW="['40%', '80%',]" :rowsH="['25rpx', '25rpx', ]" height="140rpx" :rows="2">
				</i-skeleton>
			</view>
		</i-card>
		<view class="buttons">
			<i-buttons :disabled="!(mobile && userDeatail.mobile)" bgColor="#FB652E" size="32rpx" radius="4rpx"
				color="#fff" padding="18rpx 0" @click="giveClick">
				立即赠送</i-buttons>
		</view>
	</i-page>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getUserByMobile
	} from '../../api/user';
	import {
		navTo
	} from '../../utils/common';
	import {
		vipLevel
	} from '../../utils/enums';

	import {
		getRechargeProportionApiList
	} from '../../api/index';
	import useStore from '../../stores/index'

	const store = useStore()
	const mobile = ref('')
	const active = ref(0)
	const skeleton = ref(true)

	const userDeatail = ref<GetUserByMobileRes['data']>({
		invitation: '',
		mobile: '',
		nickName: '',
		userHeadUrl: '',
		userId: '',
		vip: 0,
	})

	const vipList = ref<Array<any>>([])

	const share = async () => {
		try {
			const {
				data
			} = await getUserByMobile({
				mobile: mobile.value
			})
			userDeatail.value = data
		}
		catch (err) {
			userDeatail.value = {}
		}

	}
	const giveClick = () => {
		store.setGoodOrder({
			"cashAmount": vipList.value[active.value].rechargeValue,
			"mobile": mobile.value,
			"proportionId": vipList.value[active.value].proportionId,
			"discountPrice": vipList.value[active.value].rechargeValue,
		})
		navTo('/pages/views/cashier?type=give', 'navigateTo')
	}
	const check = (i : number) => {
		active.value = i
	}

	const getVipList = async () => {
		const {
			data
		} = await getRechargeProportionApiList()
		vipList.value = data.map((item : any) => {
			return {
				...item,
				proportionName: vipLevel[item.vip]

			}
		})
		skeleton.value = false
	}
	getVipList()
</script>

<style lang="scss" scoped>
	.search {
		@include flexRS;
		width: calc(100% - 48rpx);
		margin: 0 auto;
		background-color: #fff;
		border-radius: 36rpx;
		height: 36px;
		margin-top: 20rpx;

		.button {
			margin-right: 26rpx;
			@include titlefont(28rpx);
			color: #0072E6;
		}
	}

	.title {
		@include dfont;
		margin-bottom: 32rpx;
	}

	.orderContent {
		@include dfont;
		white-space: wrap;
	}

	.tag_card {
		border: 2rpx solid #F3F4F5;
		@include flexRS;
		padding: 26rpx 24rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;

		.card_left {
			@include flexC;
			@include titlefont(32rpx);

			.text {
				margin-top: 8rpx;
				@include dfont(24rpx);
				color: #A0A0AD;
			}
		}


	}

	.buttons {
		width: calc(100% - 48rpx);
		margin: 0 auto;
	}

	.active {
		border: 4rpx solid #EFD6BF;

	}
</style>